<template>
	<view class="d">
		<view class="nav-box">
			<view class="nav">
				<image class="nav-image" src="../../static/images/icons/back.svg" @click="back"></image>
				<view class="nav-title">明日方舟</view>
				<button class="nav-button" @click="star" v-if="myUserInfo.id!=postInfo.userId && starFlag">收藏</button>
				<button class="nav-button cancel-button" @click="cancelStar" v-else-if="myUserInfo.id!=postInfo.userId && !starFlag">取消收藏</button>
				<button class="nav-button" style="opacity: 0;" v-else>收藏</button>
			</view>
		</view>
		<view class="post-box" @touchend="maskTouchend">
			<view class="swiper-box">
				<swiper class="swiper" circular :indicator-dots="true"
				indicator-color="#ccc" indicator-active-color="#83d11b" >
					<swiper-item class="swiper-item" v-for="(item,index) in swiperImgs">
						<image :src="item" class="swiper-img" mode="aspectFit"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="post-title">{{postInfo.title}}</view>
			<view class="user-box">
				<view class="user-info">
					<image :src="userInfo.avatarPath" ></image>
					<view>
						<view class="nickname">
							{{userInfo.nickname}}
						</view>
						<view class="updatetime">
							发布于 {{getFormatTime(postInfo.createTime)}}
						</view>
					</view>
				</view>
				<view class="concern" v-if="myUserInfo.id != postInfo.userId && !isConcern">
					<button @click="()=>appendConcern(postInfo.userId)"> + 关注 </button>
				</view>
				<view class="concern" v-else-if="myUserInfo.id != postInfo.userId">
					<button @click="()=>cancelConcern()"> - 取关 </button>
				</view>
			</view>
			<view class="post-content">{{postInfo.content}}</view>
		</view>
		<view class="divider" style="height: 10rpx;margin:20rpx;background-color: #efefef;border-radius: 5rpx;"></view>
		<view class="remark-box" v-for="(item,index) in remarkList">
			<view class="user-box">
				<view class="user-info">
					<image :src="item.avatarPath" ></image>
					<view>
						<view class="nickname">
							{{item.nickname}}<view v-if="item.userId == postInfo.userId">作者</view>
						</view>
						<view class="updatetime">
							发布于 {{getFormatTime(item.updateTime)}}
						</view>
					</view>
				</view>
			</view>
			<view class="remark-content">{{item.content}}</view>
		</view>
		<view class="footer">
			<view class="input-content" auto-height>
				<textarea placeholder="说说你的想法~" v-model="remarkInput" maxlength="1000" auto-height @input="checkInput"></textarea> 
			</view>
			<view class="input-btn">
				<button :disabled="flag" @click="send">发布</button>
			</view>
		</view>
		<view class="like-heart" v-if="likeFlag" :style="likeHeartStyle"></view>
	</view>
</template>

<script>
	import { PostInfo,updatePost } from '../../static/js/Post.js'
	import { updateUser, UserInfo } from '../../static/js/User.js'
	import { RemarkList,addRemark } from '../../static/js/Remark.js'
	import { StarOne,addStar,deleteStar } from '../../static/js/Star.js'
	import { ConcernList,addConcern,delConcern } from '../../static/js/Concern.js'
	import { baseUrl } from '../../static/js/config.js'
	export default {
		data() {
			return {
				postId:1,
				postInfo:{},
				userInfo:{},
				flag:true,
				swiperImgs:[],
				remarkInput:"",
				remarkList:[],
				remarkInfo:{},
				touchNum : 0,
				likeFlag:true,
				likeHeartStyle:{
					left:0,
					top:0
				},
				likeCount:0,
				starFlag:false,
				isConcern:'',
				concernId:-1
				
			}
		},
		onLoad(options) {
			this.postId = options.id
			this.myUserInfo = uni.getStorageSync("userInfo")
			this.getInfo()
			
		},
		onPullDownRefresh(){
			this.getInfo()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			getInfo(){
				this.swiperImgs = []
				PostInfo(this.postId).then(res=>{
					this.postInfo = res.data
					let image = JSON.parse(res.data.image)
					for(var i=0;i<image.imgCount;i++){
						this.swiperImgs.push(baseUrl+'/image/posts/'+image.userId+'/'+image.postCount+'/'+i+'.png')
					}
					UserInfo(this.postInfo.userId).then(response=>{
						this.userInfo = response.data
						if(this.myUserInfo.id != this.userInfo.id){
							this.postInfo.watchCount = this.postInfo.watchCount + 1
							updatePost(this.postInfo)
						}
					})
					RemarkList(this.postInfo.id).then(response=>{
						this.remarkList = response.data.records
					})
					StarOne(this.postInfo.id,this.myUserInfo.id).then(response=>{
						if(response.data.records.length == 0){
							this.starFlag = true
						}else{
							this.starId = response.data.records[0].id
							this.starFlag = false
						}
					}).catch(err=>{console.log(err)})
					var tempForm = {
						pageNum:1,
						pageSize:10
					}
					tempForm.concernUserId = this.postInfo.id
					tempForm.userId = this.myUserInfo.id
					ConcernList(tempForm).then(response=>{
						if(response.data.records.length == 0){
							this.isConcern = false
							this.concernId = -1
						}else{
							this.isConcern = true
							this.concernId = response.data.records[0].id
						}
					})
				})
				uni.stopPullDownRefresh()
			},
			getFormatTime(datetime){
				if(datetime){
					var dt = new Date(datetime);
					let year = dt.getFullYear();
					let month = (dt.getMonth() + 1).toString().padStart(2,'0');
					let date = dt.getDate().toString().padStart(2,'0');
					let hour = dt.getHours().toString().padStart(2,'0');
					let minute = dt.getMinutes().toString().padStart(2,'0');
					let second = dt.getSeconds().toString().padStart(2,'0');
					return `${year}-${month}-${date} ${hour}:${minute}:${second}`;
				}
			},
			checkInput(){
				if(!this.remarkInput){
					this.flag = true
				}else{
					this.flag = false
				}
			},
			send(){
				this.remarkInfo.postId = this.postInfo.id
				this.remarkInfo.userId = this.myUserInfo.id
				this.remarkInfo.content = this.remarkInput
				addRemark(this.remarkInfo).then(res=>{
					this.postInfo.remarkCount += 1
					updatePost(this.postInfo).then(res=>{
						this.remarkInput = ""
						this.getInfo()
					})
				})
			},
			maskTouchend(e){
				this.touchNum ++
				setTimeout(()=>{
					this.postInfo.likeCount += 1
					if(this.touchNum >= 2 && this.myUserInfo.id != this.postInfo.userId && this.likeCount < 1){
						this.likeHeartStyle.left = e.changedTouches[0].clientX + "px"
						this.likeHeartStyle.top = e.changedTouches[0].clientY + "px"
						this.likeHeartStyle.animation = "likeHeartAnim 0.5s"
						updatePost(this.postInfo)
						this.userInfo.liked += 1
						updateUser(this.userInfo)
						this.likeCount += 1
					}
					this.touchNum = 0
				},250)
			},
			star(){
				addStar({postId:this.postInfo.id,userId:this.myUserInfo.id}).then(res=>{
					this.starFlag = false
				})
				uni.showToast({
					icon:"none",
					title:"收藏成功",
					duration:500,
					position:"bottom"
				})
			},
			cancelStar(){
				this.starFlag = true
				deleteStar(this.starId)				
				uni.showToast({
					icon:"none",
					title:"取消收藏成功",
					duration:500,
					position:"bottom"
				})
			},
			appendConcern(){
				var data = {}
				data.concernUserId = this.postInfo.userId
				data.userId = this.myUserInfo.id
				addConcern(data).then(res=>{
					uni.showToast({
						icon:"none",
						title:"关注成功",
						duration:500,
						position:"bottom"
					})
					this.getInfo()
				})
			},
			cancelConcern(){
				console.log(this.concernId)
				delConcern(this.concernId).then(res=>{
					uni.showToast({
						icon:"none",
						title:"取消关注",
						duration:500,
						position:"bottom"
					})
					this.getInfo()
				})
			}
		}
	}
</script>

<style>
	@import url("../../static/css/base.css");
	page{
		background-color: #fff;
	}
	.d{
		padding-bottom: 100rpx;
	}
	.nav{
		background-color: #fff;
	}
	.cancel-button{
		background-color: rgba(131, 209, 27, 0.2);
		color: gray;
		width: 100rpx;
	}
	.nav-image{
		margin-right: 40rpx;
	}
	.post-box{
		background-color: #fff;
	}
	.swiper-box{
		margin-top: 180rpx;
		z-index: 50;
	}
	.swiper{
		height: 500rpx;
	}
	.swiper-item{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		height: 500rpx;
	}
	.swiper-img{
		height: 100%;
		width: 100%;
	}
	.post-title{
		margin: 20rpx;
		font-weight: bolder;
		font-size: 36rpx;
		overflow: hidden;
		word-break: break-all; 
		text-overflow: ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical; 
	}
	.user-box{
		margin-left: 20rpx;
		display: flex;
		justify-content: space-between;
	}
	.user-info{
		display: flex;
	}
	.user-info image{
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
	}
	.user-info > view{
		margin-left: 20rpx;
	}
	.user-info .nickname{
		display: flex;
		align-items: center;
		margin-top: 13rpx;
		font-size: 26rpx;
		font-weight: bold;
	}
	.user-info .updatetime{
		margin-top: 7rpx;
		font-size: 24rpx;
		color: gray;
	}
	.concern{
		margin: 0 20rpx;
		z-index: 80;
	}
	.concern button{
		background-color: rgba(131, 209, 27, 0.2);
		color: #83d11b;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 10rpx 20rpx;
	}
	.post-content{
		margin: 20rpx;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		overflow: hidden;
		word-break: break-all; 
		text-overflow: ellipsis; 
		display: -webkit-box;
		-webkit-box-orient: vertical; 
	}
	.footer{
		position: fixed;
		display: flex;
		justify-content: space-around;
		margin: 20rpx;
		background-color: #fff;
	}
	.footer button{
		width: 80rpx;
		height: 60rpx;
		margin: 0;
		padding: 0;
		background-color: #c8eb21 ;
		color: #000;
		line-height: 60rpx;
		font-size: 24rpx;
		font-weight: bold;
	}
	.footer .input-btn{
		display: inline-block;
		margin: 0rpx 20rpx;
	}
	.footer .input-content{
		display: inline-block;
		background-color: #efefef;
		border-radius: 20rpx;
	}
	.input-content textarea{
		margin: 0;
		background-color: #efefef;
		line-height: 60rpx;
		padding-left: 10rpx;
		border-radius: 20rpx;
	}
	.remark-box .remark-content{
		margin: 10rpx 0;
		padding-bottom: 30rpx;
		margin-left: 120rpx;
		margin-right: 20rpx;
		font-size: 28rpx;
		border-bottom: 2rpx solid #f4f4f4;
	}
	.nickname > view{
		padding: 5rpx;
		border-radius: 5rpx;
		font-size: 18rpx;
		line-height: 18rpx;
		margin-left: 10rpx;
		background-color: #ffaa00;
		color: #fff;
	}
	.like-heart{
		position: fixed;
		background:url("../../static/images/icons/like_heart.png") no-repeat;
		opacity: 0;
		margin: auto;
		height: 50rpx;
		width: 50rpx;
		margin-left: -25rpx;
		margin-left:-25rpx;
		background-size: contain;
		z-index: 80;
		
	}
	@keyframes likeHeartAnim{
		0% {opacity: 0;transform:scale(1);}
		40% {opacity: 1;}
		50% {transform:scale(3);}
		60% {opacity: 1;}
		100 {opacity: 0;transform:scale(1);}
	}
</style>
